import React, { useEffect, useRef } from 'react';
import loading from './loading.gif'
import { throttle } from '../../utils'
const Index = (props) => {
	const img = useRef()

	const setImg = () => {
		// 使用Promise
		return new Promise((resolve) => {
			// 创建新图片
			const newImg = new Image()
			// 设置新图片路径
			newImg.src = props.src
			// 监听新图片是否加载完毕
			newImg.addEventListener('load', () => {
				// 改变Promise 状态  peadding => resolved
				resolve()
			})
		})
	}
	//检测是否进入可视区域  (同时节流)
	const checkImgInClient = throttle(() => {
		console.log(1)
		// 获取高度
		const h = window.innerHeight
		// 获取图片距离视口的位置
		const o = img.current.getBoundingClientRect()
		// 是否进入可视区
		if (!(o.top > h || o.bottom < 0)) {
			setImg().then(() => {
				// 将loading 设置成 真正的图片
				img.current.src = props.src
			})
		}
	})

	useEffect(() => {
		document.addEventListener('scroll', checkImgInClient)
		checkImgInClient()
		// 组件销毁的时候执行
		return () => {
			document.removeEventListener('scroll', checkImgInClient)
		}
	}, [])

	return (
		<img src={loading} alt="" ref={img} width={props.width} height={props.height} />
	);
}

export default Index;
